<template>
  <h4 class="title_lv2">Alert 提示</h4>
  <div class="statement"></div>
  <div>
    天璇 2.0 默认alert 提示组件、目前不支持 黑暗模式
    <qf-alert hide-icon type="success" closable @close="console.log('sdfds')">
      <template #title>fdsafads</template>
      内容内容内容内容内容内容内容
    </qf-alert>

    <qf-alert type="error">
      <template #title>fdsafads</template>
      内容内容内容内容内容内容内容
    </qf-alert>

    <qf-alert type="warning" description="rewrew内容内容内容内warning"></qf-alert>

    <qf-alert type="info" title="info" description="rewrewinfo">
      <div>
        default 插槽
        <el-button>button</el-button>
      </div>
    </qf-alert>

    <!-- <el-alert title="success alert" type="success" :closable="false" />
    <el-alert title="info alert" type="info" close-text="Gotcha" />
    <el-alert title="warning alert" type="warning" />
    <el-alert title="error alert" type="error" /> -->
  </div>

  <div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="date" label="key" width="180" />
      <el-table-column prop="name" label="描述"   />
      <el-table-column prop="address" label="默认值" width="80" />
    </el-table>
  </div>

  <!-- 页面代码 源码 -->
  <dropWrap key="oreo">
    <pre><code class="language-js">{{ alerthtm }} </code></pre>
  </dropWrap>
  <!-- 页面代码 源码 -->
</template>

<script lang="ts" setup>
import { ref, onMounted, nextTick, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { demoProps } from "@/stores/modules/merakDemo";

import Prism from "prismjs";
import "../../prism.css";

import dropWrap from "../../dropWrap.vue";
/* 响应式变量 */

const demoProp = demoProps();

//变量 htm 用于存放 组件源码 code
let alerthtm = ref<string>(`
     <qf-alert hide-icon type="success" closable @close="console.log('sdfds')">
      <template #title>fdsafads</template>
      内容内容内容内容内容内容内容
    </qf-alert>
    
    <qf-alert type="error">
      <template #title>fdsafads</template>
      内容内容内容内容内容内容内容
    </qf-alert>

    <qf-alert type="warning" description="rewrew内容内容内容内warning"></qf-alert>

    <qf-alert type="info" title="info" description="rewrewinfo">
      <div>
        default 插槽
        <el-button>button</el-button>
      </div>
    </qf-alert>
    `);

 
let tableData = [
  {
    date: "*",
    name: " alert 默认没有上下 margin 值",
    address: "false"
  },
  {
    date: "hide-icon",
    name: "隐藏icon",
    address: "false"
  },
  {
    date: "type",
    name: "类型：success、info、warning、error",
    address: "info"
  },
  {
    date: "closable",
    name: "使用 关闭按钮",
    address: "false"
  },
  {
    date: "description",
    name: "desc属性：描述内容文字",
    address: " - "
  },
  {
    date: "title",
    name: "title属性： 文字",
    address: " - "
  },
  {
    date: "插槽 title ",
    name: " title 插槽，级别高于 title属性",
    address: " - "
  },
  {
    date: "插槽 default ",
    name: " default 插槽，级别高于 description属性",
    address: " - "
  },
  {
    date: "@close ",
    name: "点击关闭按钮回调事件",
    address: " - "
  }
];

/* 
    生命周期
    */
onMounted(() => {
  nextTick(() => {
    Prism.highlightAll();
  });
});

/* methods */
</script>
<style lang="scss" scoped>
.el-row::v-deep {
  margin-bottom: 20px;
}
.el-alert {
  margin-bottom: 20px;
}
.impTxt {
  color: var(--el-color-primary);
  padding: 0 5px;
}
</style>
